<!--
 * @Description: 
 * @Date: 2024-07-08 09:20:03
 * @LastEditTime: 2024-07-23 18:14:40
-->
<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="相册名称" prop="albumId">
            <el-select v-model="formData.albumId" placeholder="请选择相册">
              <el-option v-for="i in selectList" :key="i.id" :label="i.name" :value="i.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="图片列表" prop="picUrls">
            <el-upload
              ref="upfile"
              :auto-upload="false"
              :on-change="handleChange"
              :file-list="formData.picUrls"
              :multiple="true"
              list-type="picture-card"
              darg
              action="#"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import * as albumphoto from '@/api/spb/partyWorkAlbum/index'
import { FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
const message = useMessage()
const { t } = useI18n()
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('上传图片') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = reactive({
  albumId: '',
  picUrls: []
})
const selectList = ref<any[]>([])
const formRules = reactive<FormRules>({
  albumId: [{ required: true, message: '相册名称不能为空', trigger: 'blur' }],
  picUrls: [{ required: true, message: '图片不能为空', trigger: 'blur' }]
})
const emit = defineEmits(['success'])
const formRef = ref()
/** 打开弹窗 */
const open = async (title, id) => {
  resetForm()
  dialogVisible.value = true
  let data = await albumphoto.getAlbumPage({ pageNo: 1 })
  selectList.value = data.list
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const submitForm = async () => {
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    if (dialogTitle.value === '上传图片') {
      let fd = new FormData()
      formData.picUrls.forEach((item) => {
        //文件信息中raw才是真的文件
        fd.append('file', item.raw)
      })
      fd.append('albumId', formData.albumId)
      await albumphoto.createPhotoListPage(fd)
      message.success(t('common.createSuccess'))
    }
    dialogVisible.value = false
    //发送操作成功的事件
    emit('success', true)
  } finally {
    formLoading.value = false
  }
}
const handleChange = (file, fileList) => {
  formData.picUrls = fileList
  console.log(formData.picUrls, 999)
}
/** 重置表单 */
const resetForm = () => {
  formData.albumId = ''
  formData.picUrls = []
  formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
:deep(.el-upload--picture-card) {
  background: #fff;
}
</style>
